import React, {Component} from 'react';
import {Modal} from '@ant-design/react-native'
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    Dimensions,
    TouchableOpacity, Image
} from 'react-native';
import {apiDomain, postData} from "../../common/api";
import userStatus from "../../common/userStatus";

const {width, height} = Dimensions.get('window');

class Login extends Component {
    /**
     * @type {{username: string}}
     * @type {{password: string}}
     */
    state = {
        username: "user",
        password: "123"
    }

    toRegister() {
        this.props.navigation.navigate('register')
    }

    handleLogin() {
        const {username, password} = this.state
        if (username === '' || password === '') {
            console.log('err')
            Modal.alert('Error', 'username and password is empty', [
                {text: 'OK'},
            ])
            return
        }
        const url = apiDomain + "/Index/login"
        postData(url, {username: username, password: password}).then(res => {
            console.log(res)
            if (res.code === 200) {
                console.log('login success', res.data.username)
                userStatus.setUserStatus({username: res.data.username, type: res.data.type, status: 'login', id: res.data.id})
            } else {
                Modal.alert('Error', res.msg, [
                    {text: 'OK'},
                ])
            }
        })
        console.log(this.state)
    }

    render() {
        return (
            <View>
                <View style={{width: width, height: 200, position: 'relative', display: 'flex', justifyContent: 'center', borderTopColor: '#fff', borderTopWidth: 1}}>
                    <Image source={require('../../img/titleBg4.png')} style={{width: width, height: 200, position: 'absolute'}} />
                </View>
                <View style={styles.container}>
                    <View style={{alignItems: 'center'}}>
                        <TextInput placeholder="Please enter username" style={styles.input}
                                   onChangeText={(value) => this.setState({username: value})}/>
                        <TextInput placeholder="Please enter password" password style={styles.input}
                                   onChangeText={(value) => this.setState({password: value})}/>
                        <TouchableOpacity style={styles.loginBtn} onPress={() => this.handleLogin()}>
                            <Text style={{color: '#ffe700'}}>Login</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.loginBtn} onPress={() => this.toRegister()}>
                            <Text style={{color: '#ffe700'}}>Register</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        marginTop: height * 0.1,
        backgroundColor: '#fff'
    },

    input: {
        width: width * 0.8,
        height: 38,
        borderColor: 'lightgrey',
        borderWidth: 1,
        marginBottom: 8,
        borderRadius: 4,
        textAlign: 'left',
        alignSelf: 'center'
    },

    loginBtn: {
        height: 38,
        width: width * 0.8,
        backgroundColor: 'rgb(0, 21, 41)',
        marginTop: 8,
        justifyContent: 'center',
        alignItems: 'center'
    },
    title: {
        fontSize: 22,
        textAlign: 'left',
        marginBottom: 30
    }
});

export default Login;
